<template>
  <div class="splb">
    <!-- 商品评论 -->
    <!-- 输入框 -->
    <el-row>
      <el-col :span="18" style="display: flex; margin: 20px 0">
        <el-input
          placeholder="请输入用户ID"
          size="mini"
          v-model="form.userId"
          clearable
        ></el-input>
        <el-input
          placeholder="请输入商品ID"
          v-model="form.valueId"
          size="mini"
          clearable
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          style="width: 80px; height: 26px"
          @click="getlist"
          >查找</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-download"
          style="width: 80px; height: 26px"
          @click="downLoad"
          >导出</el-button
        >
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-row>
      <el-col :span="24">
        <el-table
          border
          @current-change="handleCurrentChange1"
          :data="tableData"
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column label="用户ID" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.userId }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品ID" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.valueId }}</span>
            </template>
          </el-table-column>
          <el-table-column label="打分" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.star }}</span>
            </template>
          </el-table-column>
          <el-table-column label="评论内容" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.content }}</span>
            </template>
          </el-table-column>
          <el-table-column label="评论图片" width="180">
            <template slot-scope="scope">
              <img
                v-for="(item, index) in scope.row.picUrls"
                :key="index"
                :src="item"
                alt=""
                width="40px"
                height="40px"
              />
            </template>
          </el-table-column>
          <el-table-column label="时间" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handlehuifu(scope.$index, scope.row)"
                >回复</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 回复 -->
    <el-dialog
      title="回复"
      :visible.sync="dialogVisible"
      width="53%"
      style="box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3)"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="huifu1" label-width="80px">
        <el-form-item label="回复内容">
          <el-input type="textarea" v-model="huifu1.content"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 分页器 -->
    <el-row>
      <el-col :span="24">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          background
          :page-size="form.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import { spplbl, shanchu, huifu } from "@/api/spgl/sppl.js";
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      huifu1: {
        commentId: 0,
        content: "",
      },
      form: {
        page: 1,
        limit: 20,
        sort: "add_time",
        order: "desc",
        userId: "",
        valueId: "",
      },
      total: 1,
      currentRow: null,
      // 查看
      detail: "",
    };
  },
  methods: {
    // 导出
    downLoad() {
      this.$confirm("此操作将导出excel表格, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(this.tableData,'tableData');

          // 定义表头
          const headers = ["评论ID", "用户ID", "商品ID", "评论"]; // 将表格数据转换为工作表数据
          const worksheetData = [
            headers, // 第一行为表头
            ...this.tableData.map((item) => {
              return [
                item.id || "",
                item.userId || "",
                item.valueId || "",
                item.content || "",
              ];
            }),
          ]; // 创建工作表

          const worksheet = XLSX.utils.aoa_to_sheet(worksheetData); // 创建工作簿

          const workbook = XLSX.utils.book_new();
          XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); // 导出 Excel 文件

          XLSX.writeFile(workbook, "商品评论导出.xlsx"); // 提示导出成功

          this.$message({
            type: "success",
            message: "导出成功！",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消导出",
          });
        });
    },
    // 回复确定
    onSubmit() {
      console.log("submit!");
      huifu(this.huifu1).then((res) => {
        this.huifu1.content = "";
        this.getlist();
        if (res.errno == 0) {
          this.dialogVisible = false;
          this.$notify({
            title: "成功",
            message: "回复成功",
            type: "success",
          });
        } else {
          this.dialogVisible = false;
          this.$notify.error({
            title: "错误",
            message: "订单商品已回复！",
          });
        }
      });
    },
    // 关闭模态框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 回复
    handlehuifu(index, row) {
      this.dialogVisible = true;
      this.huifu1.commentId = row.id;
      console.log(index, row);
    },
    // 删除
    handleDelete(index, row) {
      // console.log(index, row);
      shanchu(row).then((res) => {
        this.getlist();
        if (res.errno == 0) {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: "删除失败",
          });
        }
      });
    },
    // 勾选框
    handleCurrentChange1(val) {
      this.currentRow = val;
      console.log(this.currentRow);
    },
    // 分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.form.limit = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.form.page = val;
      this.getlist();
    },
    // 遍历
    getlist() {
      spplbl(this.form).then((res) => {
        console.log(res);
        this.total = res.data.total;
        this.tableData = res.data.list;
      });
    },
  },
  mounted() {
    this.getlist();
  },
};
</script>

<style lang="scss" scoped>
.splb {
  padding: 20px;
}
// 标签
.el-tag {
  height: auto;
  line-height: normal;
}
// 表格内容
.el-table .cell {
  font-size: 12px !important;
}
// 输入框
.el-input {
  margin-right: 10px;
  width: 200px;
  height: 30px;
  font-size: 12px;
}
.el-input__inner {
  height: 30px;
}
// 按钮
.el-button {
  margin-right: 10px;
  font-size: 12px;
  padding: 7px 15px;
}
// 表格样式
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
  // .el-form-item__label{
  //   width: 90px;
  // }
  // span{
  //   margin-left:  30px;
  // }
}
// 布局样式
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>